<template>
	<image src="/static/bg_squndlubig.png" mode="widthFix" class="img-top"></image>

	<view class="fill">
		<view class="vss flex flex-col items-center justify-between">
			<image :src="imgUrl + info.logo" class="logo"></image>
			<view class="site">{{ info.title }}</view>
			<view class="desc">授权登录后即可体验完整服务，享受个性化推荐~</view>
		</view>

		<view class="btn-box">
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="mpWeiXinLogin" v-if="formRef.source == 'mp-weixin'">
				<text class="btn-text">手机号快捷登录</text>
			</button>

			<button class="btn" @click="wechatAuth()" v-else>
				<text class="btn-text">微信一键登录</text>
			</button>

			<view class="border-btn" @click="goBackIndex">
				<text>取消</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, imgUrl, productionUrl, goBack, goUrl, goIndex, hint, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';

	const formRef = ref({
		parent_code: '',
		source: ''
	});

	const code = ref('');
	const state = ref('');
	const info = ref('');
	function goBackIndex() {
		uni.setStorageSync('refuseToken', true);
		goIndex('/pages/index');
	}

	async function getIndexIndex() {
		let res = await port('getIndexIndex');
		info.value = res.data;
	}

	onShow(() => {
		getIndexIndex();

		formRef.value.parent_code = uni.getStorageSync('parent_code');
	});

	onShow(() => {
		// #ifdef MP-WEIXIN
		formRef.value.source = 'mp-weixin';

		// #endif
		const token = uni.getStorageSync('token');
		// #ifdef H5
		formRef.value.source = 'h5';
		const hash = window.location.search;
		const paramString = hash.split('?')[1] || '';
		const params = new URLSearchParams(paramString);
		if (params.get('state')) {
			state.value = params.get('state');
		}
		if (params.get('code') && !token) {
			code.value = params.get('code');
			wechatAuthLogin();
		}
		// #endif
	});

	async function mpWeiXinLogin(p) {
		loading();
		uni.login({
			async success(e) {
				if (p.detail.errMsg === 'getPhoneNumber:ok') {
					const res = await port('wechatAuth', {
						code: e.code,
						phone_code: p.detail.code,
						parent_code: formRef.value.parent_code,
						source: formRef.value.source
					});
					hint(res.msg);
					setTimeout(() => {
						closeLoading();
						uni.setStorageSync('token', res.data.token);
						goIndex('/pages/index');
					}, 300);
				} else {
					hint('用户取消授权！');
				}
			}
		});
	}

	async function wechatAuthLogin() {
		loading();
		let res = await port('wechatRedirect', { code: code.value, state: state.value });
		setTimeout(() => {
			hint(res.msg);
			uni.setStorageSync('token', res.data.token);
			closeLoading();
			location.href = productionUrl;
		}, 200);
	}

	function wechatAuth() {
		loading();
		port('wechatAuth', formRef.value).then((res) => {
			closeLoading();
			location.href = res.data.url;
		});
	}
</script>

<style scoped lang="scss">
	.img-top {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;
		padding-top: 200rpx;

		.vss {
			margin: 45rpx;
			.logo {
				width: 248rpx;
				height: 248rpx;
			}
			.site {
				font-weight: bold;
				font-size: 46rpx;
				color: #000000;
			}
			.desc {
				margin-top: 80rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #777777;
			}
		}
		.btn-box {
			padding-top: 30rpx;
		}
		.btn {
			background: linear-gradient(-90deg, #fb3204 0%, #fe7800 100%);
			border-radius: 44rpx;
			padding: 3rpx 0;
			border: none;
			text-align: center;
			margin: 30rpx;
			> image {
				width: 20rpx;
				height: 20rpx;
				margin-right: 15rpx;
			}
			> text {
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
			}
		}
		.border-btn {
			border: 1px solid #fb3204;
			border-radius: 44rpx;
			padding: 20rpx 0;
			text-align: center;
			margin: 30rpx;

			> image {
				width: 20rpx;
				height: 20rpx;
				margin-right: 15rpx;
			}
			> text {
				font-weight: 500;
				font-size: 30rpx;
				color: #fb3204;
			}
		}
	}
</style>
